import Cookies from "js-cookie";
import { RefObject, cloneElement, useCallback, useEffect, useRef, useState } from "react";

export type Options = {
  onEnter?: () => void
  onLeave?: () => void
  onChange?: (isHovering: boolean) => void
}

export default function useHover(ref: RefObject<HTMLElement>, options?: Options): boolean {
  const { onEnter, onLeave, onChange } = options || {};
    const [isEnter, setIsEnter] = useState(false);
    useEffect(() => {
      ref.current?.addEventListener('mouseenter', () => {
        onEnter?.()
        setIsEnter(true)
        onChange?.(true)
      })
      ref.current?.addEventListener('mouseleave', () => {
        onLeave?.()
        setIsEnter(false)
        onChange?.(false)
      })
    }, [ref]);
    return isEnter
}